<template>
    <f7-page class="land-body" v-if="isQjt">
        <van-loading></van-loading>
    </f7-page>
    <f7-page class="land-body" v-else>
        <img src="static/img/land/index1/bgc.png" alt="" class="bgcimg" />
        <div class="hello">登录账号</div>
        <f7-login-screen-title class="pingtai">
            欢迎使用起重机械管理系统
        </f7-login-screen-title>
        <!-- <div class="window-tools" v-if="packageType != 'app'">
            <f7-button @click="resize('window-min')" class="oper_btn">
                <f7-icon f7="minus"></f7-icon>
            </f7-button>
            <f7-button @click="resize('window-max')" class="oper_btn">
                <f7-icon f7="app"></f7-icon>
            </f7-button>
            <f7-button class="oper_btn" @click="resize('window-close')" style="font-size: 30px; line-height: 30px">
                <f7-icon f7="xmark"></f7-icon>
            </f7-button>
        </div> -->
        <!-- 登录框 -->
        <f7-list>
            <form>
                <qm-field :value="loginId" @input="gitlogin" placeholder="请输入您的手机号" clearable type="text" class="qmfield">
                    <template #left-icon>
                        <img src="static/img/land/index11/login_shoujihao.svg" alt="" class="iconimg" />
                    </template>
                </qm-field>
                <qm-field :value="password" @input="gitpassword" placeholder="请输入您的密码" :type="textstyle" class="qmfield">
                    <template #left-icon>
                        <img src="static/img/land/index1/login_mima.svg" alt="" class="iconimg" />
                    </template>
                    <template #right-icon>
                        <img src="static/img/land/index1/biyan.svg" alt="" width="30px" height="12px" v-if="!showpassword"
                            @click="changetype()" />
                        <img src="static/img/land/index1/kaiyan.svg" alt="" width="30px" height="12px" v-else
                            @click="changetype()" />
                    </template>
                </qm-field>
            </form>
        </f7-list>
        <!-- 登录按钮 -->
        <f7-button raised fill round class="qm-button" @click="login">登录</f7-button>
        <!-- <f7-row class="other">
            <f7-col style="text-align: left"><f7-link @click="register()" class="qm-register">立即注册</f7-link></f7-col>
            <f7-col style="text-align: right"><f7-link @click="forget()" class="qm-register">忘记密码？</f7-link></f7-col>
        </f7-row> -->
        <!-- <qm-divider class="divider" :hairline="false"> 第三方登录 </qm-divider> -->
        <!-- <f7-row class="qm-row">
      <f7-col><img src="static/img/land/index1/weixin.png" alt="" /></f7-col>
      <f7-col><img src="static/img/land/index1/renlian.png" alt="" /></f7-col>
      <f7-col><img src="static/img/land/index1/shouji.png" alt="" /></f7-col>
      <div class="footer">广州市齐明软件科技有限公司提供技术支持</div>
    </f7-row> -->
    </f7-page>
</template>
<script>
import Config from "@/libs/config";

export default {
    data () {
        return {
            loginId: "",
            password: "",
            oauthType: "LOCAL",
            appCode: this.$f7.id || window.plus.runtime.appid,
            packageType: Config.setting.packageType,
            showpassword: false,
            rsaPublic: "",
        };
    },
    created () {
        this.loadRsaPublic();
        this.getCode();
    },
    computed: {
        company: function () {
            return "2020 ©" + this.$framework.config.info.company;
        },
        textstyle () {
            if (this.showpassword) {
                return "text";
            } else {
                return "password";
            }
        },
        isQjt () {
            return window.qmsdk != undefined;
        }
    },
    methods: {
        loadRsaPublic () {
            this.$framework.account.getRsaPublic().then((rsaPublic) => {
                this.rsaPublic = rsaPublic;
            });
        },
        changetype () {
            this.showpassword = !this.showpassword;
        },
        gitlogin (a) {
            this.loginId = a;
        },
        gitpassword (a) {
            this.password = a;
        },
        login () {
            if (!this.loginId) {
                this.$f7.dialog.toast("请输入用户名");
            } else if (!this.password) {
                this.$f7.dialog.toast("请输入密码");
            } else {
                const principal = this.$framework.account.getLoginEncryptorParam(
                    this.loginId,
                    this.password,
                    this.rsaPublic
                );
                if (!principal) {
                    this.$f7.dialog.toast("用户名或密码错误！");
                } else {
                    this.$f7.preloader.show();
                    this.$framework.account.login(
                        {
                            principal: principal,
                            oauthType: "LOCAL",
                            appCode: this.$f7.id || window.plus.runtime.appid,
                            packageType: Config.setting.packageType,
                        },
                        (r) => {
                            this.$f7.preloader.hide();
                            if (r.success) {
                                this.$framework.redirect.home();
                            } else {
                                this.$f7.dialog.alert(r.message);
                                this.getCode();
                            }
                        }
                    );
                }
            }
        },
        getAppLink (key) {
            let url = key.serverUrl;
            if (key.parmas) {
                let d1 = url.indexOf("?"),
                    d2 = url.indexOf("#");
                if (d1 == -1 || d2 > d1) {
                    url += "?";
                }
                let pa = JSON.parse(this.data.parmas || {});
                Object.keys(pa).forEach((key) => {
                    url += `&${key}=${encodeURIComponent(this.parmas[key] || pa[key])}`;
                });
            }
            return url;
        },
        finderLogin () {
            if (!window.plus) {
                this.$f7.dialog.alert("不是手机端，无法使用指纹登录");
                return;
            }
            if (!window.plus.fingerprint) {
                this.$f7.dialog.alert(
                    "当前环境不支持指纹识别API，请联系管理员更新到最新版本"
                );
                return;
            }
            let isSupport = window.plus.fingerprint.isSupport();
            if (!isSupport) {
                this.$f7.dialog.alert("您的手机不支持指纹登录，请输入账号密码登录");
                return;
            }
            let isKeygardSecure = window.plus.fingerprint.isKeyguardSecure();
            if (!isKeygardSecure) {
                this.$f7.dialog.alert("您没有设置密码锁屏，无法使用指纹登录");
                return;
            }
            let isEnrolledFingerprints =
                window.plus.fingerprint.isEnrolledFingerprints();
            if (!isEnrolledFingerprints) {
                this.$f7.dialog.alert("您的设备还没有录入指纹，无法使用指纹登录");
                return;
            }
            var waiting = null;
            window.plus.fingerprint.authenticate(
                function () {
                    window.plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
                    console.log("指纹识别成功");
                },
                function (e) {
                    switch (e.code) {
                        case e.AUTHENTICATE_MISMATCH:
                            window.plus.nativeUI.toast("指纹匹配失败，请重新输入");
                            break;
                        case e.AUTHENTICATE_OVERLIMIT:
                            window.plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
                            window.plus.nativeUI.alert(
                                "指纹识别失败次数超出限制，请使用其它方式进行登录"
                            );
                            break;
                        default: //兼容Android平台关闭等待框
                            window.plus.nativeUI.closeWaiting();
                            window.plus.nativeUI.alert(
                                "指纹识别失败(" + e.code + ")，请重试"
                            );
                            break;
                    }
                }
            );
            // Android平台弹出等待提示框
            if ("Android" == plus.os.name) {
                window.plus.nativeUI.showWaiting("指纹识别中...");
            }
        },
        wechatLogin (type) {
            let self = this;
            if (!window.plus) {
                this.$f7.dialog.alert("不是手机端无法使用微信登录!");
                return;
            }
            plus.oauth.getServices(
                function (services) {
                    let auths = services;
                    for (var i in services) {
                        let service = services[i];
                        auths[service.id] = service;
                    }
                    let aweixin = auths["weixin"];
                    if (!aweixin) {
                        plus.nativeUI.alert("当前环境不支持微信登录");
                        return;
                    }

                    new Promise((rs, rj) => {
                        if (!aweixin.authResult) {
                            // aweixin.authorize(
                            //   function(e) {
                            //     console.log("授权码：", e.code); //app端获取到的code

                            //     aweixin.login(
                            //       function(e) {
                            //         rs(e.target);
                            //       },
                            //       function(e) {
                            //         rj(new Error("登录认证失败: " + JSON.stringify(e)));
                            //       }
                            //     );
                            //   },
                            //   function(e) {
                            //     plus.nativeUI.alert("授权失败："+JSON.stringify(e));
                            //     rj(new Error("微信授权失败"));
                            //   },
                            //   {
                            //     scope: "snsapi_userinfo",
                            //     state: "authorize test",
                            //   }
                            // );
                            aweixin.login(
                                function (e) {
                                    rs(e.target);
                                },
                                function (e) {
                                    rj(new Error("登录认证失败: " + JSON.stringify(e)));
                                },
                                {
                                    scope: "snsapi_userinfo",
                                    state: "authorize test",
                                }
                            );
                        } else {
                            rs(aweixin);
                        }
                    })
                        .then((rlt) => {
                            let accessToken = rlt.authResult.access_token;
                            let openid = rlt.authResult.openid;
                            let nickname = rlt.userInfo.nickname;
                            let params = {
                                openid: openid,
                                accessToken: accessToken,
                                nickname: nickname,
                                oauthType: "WEIXIN",
                                auto_register: type,
                            };

                            self.$framework.account.wechatLogin(params);
                        })
                        .catch((err) => {
                            plus.nativeUI.alert(err);
                        });
                },
                function (e) {
                    plus.nativeUI.alert("获取登录授权服务列表失败：" + JSON.stringify(e));
                }
            );
        },
        getCode () {
            // this.$('img.vcode').attr('src', this.$framework.util.mapApi(framework.api.vcode) + "?_r=" + Math.random());
        },
        register () {
            this.$f7.views.current.router.navigate(`/business/Home/register`);
        },
        forget () {
            this.$f7.views.current.router.navigate(`/business/Home/forget`);
        },
        resize (type) {
            if (type == "window-close") {
                this.$f7.dialog.confirm("确定退出应用吗？", (r) => {
                    if (r) {
                        window.ipcRenderer.send(type);
                    }
                });
            } else {
                window.ipcRenderer.send(type);
            }
        },
    },
};
</script>
<style lang="less" scoped>
.land-body {
    background-color: var(--color-fill-grey-inverse);

    .van-loading {
        text-align: center;
    }

    .bgcimg {
        position: relative;
        top: calc(137px * var(--ratio));
        left: calc(22px * var(--ratio));
        width: calc(175px * var(--ratio));
        height: calc(131px * var(--ratio));
    }

    .hello {
        margin-top: calc(60px * var(--ratio));
        margin-left: calc(62px * var(--ratio));
        color: #49494a;
        font-size: calc(59px * var(--ratio));
    }

    .pingtai {
        margin-left: calc(62px * var(--ratio));
        margin-right: calc(93px * var(--ratio));
        color: #28282c;

        font-size: calc(39px * var(--ratio));
        margin-top: calc(18px * var(--ratio));
        font-weight: 700;
        text-align: left;
    }

    /deep/.van-cell {
        padding-bottom: 0px;
        margin-top: calc(40px * var(--ratio));
    }

    .qmfield {
        margin-left: calc(43px * var(--ratio));
        margin-right: calc(74px * var(--ratio));
        --f7-input-font-size: calc(28px * var(--ratio));
        width: 90%;

        /deep/ .van-field__left-icon {
            line-height: 40px;
            margin-right: calc(15px * var(--ratio));
        }

        /deep/ .van-field__control {
            width: 80%;
        }

        /deep/ .van-field__body {
            justify-content: space-between;
        }

        .iconimg {
            width: calc(25px * var(--ratio));
            height: calc(30px * var(--ratio));
        }
    }

    .qm-link {
        margin-left: 79%;
        font-size: calc(29px * var(--ratio));
        margin-top: 10px;
        color: var(--color-brand);
    }

    .qm-button {
        margin: 0px calc(52px * var(--ratio));
        height: calc(110px * var(--ratio));
        line-height: calc(110px * var(--ratio));
        background-color: var(--color-brand);
        font-size: var(--font-size-maintitle);
        --f7-button-raised-box-shadow: auto;
    }

    .divider {
        margin: calc(82px * var(--ratio)) calc(94px * var(--ratio)) 0px;
        font-size: calc(27px * var(--ratio));
    }

    .qm-row {
        margin: calc(58px * var(--ratio)) calc(94px * var(--ratio)) 0px;
        text-align: center;

        img {
            width: calc(82px * var(--ratio));
            height: calc(82px * var(--ratio));
        }

        .footer {
            position: absolute;
            text-align: center;
            margin-top: 143px;
            font-size: 12px;
            left: 0px;
            right: 0px;
            color: #959cb2;
        }
    }

    /deep/input:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #ffff inset !important;
    }

    .other {
        margin: 10px calc(52px * var(--ratio)) 0;
    }
}
</style>
